<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <!--布局容器-->
  <el-container style="min-height: 100vh">
    <!--侧边栏容器-->
    <el-aside :width="sideWidth + 'px'" class="aside">
      <!--使用侧边导航栏容器-->
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" ></Aside>
    </el-aside>

    <!--布局容器-->
    <el-container>
      <!--顶栏容器-->
      <el-header style="border-bottom: 1px solid #ccc">
        <!--使用顶栏容器-->
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"></Header>
      </el-header>

      <!--主要区域容器-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from "@/components/Aside";   //引入侧边导航栏组件
import Header from "@/components/Header";   //引入顶栏容器组件

export default {
  name: "MainPage",
  data(){
    return{
      collapseBtnClass: 'el-icon-s-fold',   //默认折叠按钮图标
      isCollapse: true,      //侧边导航栏默认折叠
      logoTextShow: false,    //默认不显示文字
      sideWidth:''
    }
  },
  components:{  //引入并使用组件
    Aside,
    Header
  },
  methods: {
    collapse() {    //点击收缩按钮时触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  //折叠时
        this.sideWidth = 64    //折叠时的宽度
        this.collapseBtnClass = 'el-icon-s-fold'  //折叠时的图标
        this.logoTextShow = false   //折叠时文字不显示
      } else {   //展开时
        this.sideWidth = 200   //展开时的宽度
        this.collapseBtnClass = 'el-icon-s-unfold'  //展开时的图标
        this.logoTextShow = true   //展开时文字显示
      }
    }
  },
}
</script>

<style scoped>

/*侧边栏容器样式 折叠展开过程动画的延迟*/
.aside{
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -o-transition: width 0.25s;
}

</style>